<template>
  <!-- 实验性 -->
  <PageWrapper :contentFullHeight="true" class="app-content" v-loading="compState.loadingRef" loading-tip="加载中...">
    <WujieVue
      v-if="compState.appUrl !== ''"
      width="100%"
      height="100%"
      :name="compState.appName"
      :url="compState.appUrl"
      :sync="false"
      :beforeLoad="beforeLoad"
      :beforeMount="beforeMount"
      :afterMount="afterMount"
      :beforeUnmount="beforeUnmount"
      :afterUnmount="afterUnmount"
      :loadError="loadError"
    ></WujieVue>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { defineComponent, onMounted, reactive, watchEffect, computed, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRoute, useRouter } from "vue-router"
  import { getMicroAppDetails } from './microApp.api';
  import { useUserStore } from '/@/store/modules/user';

  const router = useRouter()
  let id = router.currentRoute.value.params?.id
  console.log("currentRoute.params: " + id);
  const { createMessage } = useMessage();
  
  const compState = reactive({
    absolute: false,
    loading: false,
    // theme: 'dark',
    background: 'rgba(111,111,111,.7)',
    tip: '加载中...',
    loadingRef: false,
    appUrl: '',
    appName: ''
  });

  onMounted(async () => {
    const userStore = useUserStore();
    const data = await getMicroAppDetails({id})
    compState.appName = data.name
    compState.appUrl = data.appUrl + '?accessToken=' + userStore.getToken + '&tenantId=' + userStore.getSelectTenant.tenantId
    console.log('appData', data);
    
  })
 
  const beforeLoad = (appWindow: Window) => {
    // openFullLoading()
    // compState.loadingRef = true
    // openLoading(false)
    console.log('beforeLoad')
  }

  const beforeMount = (appWindow: Window) => {
    console.log('beforeMount')
    compState.loadingRef = false
  }

  const afterMount = (appWindow: Window) => {
    console.log('afterMount')
  }

  const afterUnmount = (appWindow: Window) => {
    console.log('afterUnmount')
  }

  const beforeUnmount = (appWindow: Window) => {
    console.log('beforeUnmount')
  }

  const loadError = (url: string, e: Error) => {
    console.error(url, e);
    // closeFullLoading()
    // compState.loadingRef = false
    createMessage.error('加载应用失败')
  }
</script>


<style lang="less">
.app-content {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  position: relative;
  width: 100%;
}
</style>